<template>
  <div class="ctrl-btn-group">
    <button class="btn min-btn" @click="ctrl('min')"></button>
    <button class="btn" :class="isFullScreen ? 'max-s-btn' : 'max-b-btn'" @click="ctrl('max')"></button>
    <button class="btn cancel-btn" @click="ctrl('close')"></button>
  </div>
</template>
<script>
const { ipcRenderer: ipc } = require('electron')
export default {
  name: 'CtrlBtnGroup',
  data() {
    return {
      isFullScreen: false,
      settingDialog: false,
    }
  },
  methods: {
    ctrl(type) {
      ipc.send(type)
    },
  },
  mounted() {
    ipc.on('fullScreenStatus', (event, arg) => {
      this.isFullScreen = arg
    })
  },
}
</script>
<style lang="scss" scoped>
.btn {
  width: 14px;
  height: 14px;
  padding: 0 15px;
  border: 0;
  -webkit-app-region: no-drag;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:hover {
    opacity: 0.5;
  }
}

.setting-btn {
  background: url() center / contain no-repeat;
}

.min-btn {
  background: url() center / contain no-repeat;
}

.max-b-btn {
  background: url() center / contain no-repeat;
}

.max-s-btn {
  background: url() center / contain no-repeat;
}

.cancel-btn {
  background: url() center / contain no-repeat;
}
</style>